import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    todos:JSON.parse(localStorage.getItem("vuex")||'[]'),
    activetab:"all"
  },
  getters:{
    activetab:function(state){
      return state.activetab;
    },
    filtertodos:function(state){
      // console.log(state.todos)
      if (state.activetab==='all') {
          return state.todos
        }else if (state.activetab==="active") {
          return state.todos.filter(v=>{
            return !v.status
          }) 
        }else if (state.activetab==="completed") {
          return state.todos.filter(v=>{
            return v.status
          }) 
        }
      },
      remain:function(state){
        let remaintodos = state.todos.filter(v=>{
          if (!v.status) {
            return true
          }
        })
        return remaintodos.length;
      },
      AllChecked:function(state){
        let Checked = true;
        state.todos.map((v)=>{
        if (!v.status) Checked = false
          })
        
           return Checked
        },
  },
  mutations: {
    clear:function(state){
      let activeTodos = state.todos.filter((v) => {
        // v.status => false
        return !v.status; // false => !false => true
      });
      state.todos = activeTodos;
    },
    changeactive:function(state,{payload}){
      state.activetab = payload.activetab
    },
    dele:function(state,{payload}){
      state.todos.splice(payload.index,1)
    },
 AllCheck:function(state){
  state.todos.map((v)=>{
    v.status = true
  })
},   
addtodos:function(state,{payload}){
state.todos.push(payload);
},

  },
  actions: {
  },
  modules: {
  }
})
